<template>
    <div class="container">
        <header>
            <Sousuo></Sousuo>
        </header>
        <main>
            <van-back-top right="0px" bottom="150px" offset="800" />
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <Lunbo :lunbo="Lunbo"></Lunbo>
                <Skill :skill="skill"></Skill>
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <List :list="list"></List>
                </van-list>
            </van-pull-refresh>
        </main>
    </div>
</template>

<script>
import Sousuo from './components/sousuo.vue';
import Lunbo from './components/lunbo.vue';
import Skill from './components/skill.vue';
import List from './components/list.vue';
import { getLunboList, getSeckillList, getRecomendList, getDetailPro } from '@/apis/home/index.js';



export default {
    components: {
        Sousuo,
        Lunbo,
        Skill,
        List
    },
    data() {
        return {
            Lunbo: [],
            skill: [],
            list: [],
            loading: false,
            finished: false,
            count: 1,
            refreshing: false

        }
    },
    created() {


        // 
        getLunboList().then(res => {
            console.log(res.data.data);
            this.Lunbo = res.data.data

        })

        //秒杀
        getSeckillList({
            count: 1,
            limitNum: 12
        }).then(res => {
            console.log(res.data.data);
            this.skill = res.data.data;

        })
        

        //商品列表
        // getRecomendList({
        //     count: 1,
        //     limitNum: 12
        // }).then(res => {
        //     console.log(res.data.data);
        //     this.list = res.data.data;

        // })
    },
    methods: {
        onLoad() {
            this.loading = true; // 开始加载动画
            // 移除不必要的setTimeout（实际项目中无需模拟延迟，直接请求即可）
            getRecomendList({
                count: this.count, // 基于当前count请求下一页
                limitNum: 6
            }).then(res => {
                const shuju = res.data.data;
                if (shuju.length > 0) {
                    this.list = this.list.concat(shuju); // 拼接新数据
                    this.count++; // 只有请求成功且有数据，才递增count（关键）
                } else {
                    this.finished = true; // 无数据时标记结束加载
                }
                this.loading = false; // 加载完成，关闭动画
            }).catch(err => {
                // 请求失败时也需关闭加载动画，避免卡死
                this.loading = false;
                console.error('加载更多失败', err);
            });
        },
        onRefresh() {
            this.refreshing = true; // 开始刷新动画
            const newCount = parseInt(Math.random() * 20); // 生成新的起始count
            // 移除不必要的setTimeout，直接请求
            getRecomendList({
                count: newCount, // 用新count请求刷新数据
                limitNum: 6
            }).then(res => {
                this.list = res.data.data; // 覆盖列表为刷新后的数据
                this.count = newCount; // 重置count为新的起始值（关键）
                if (res.data.data.length === 0) {
                    this.finished = true; // 若刷新后无数据，标记结束加载
                } else {
                    this.finished = false; // 有数据时允许继续加载更多
                    this.count++; // 刷新成功后，count递增（为下一次onLoad做准备）
                }
                this.refreshing = false; // 刷新完成，关闭动画（关键：在请求完成后执行）
            }).catch(err => {
                // 请求失败时关闭刷新动画
                this.refreshing = false;
                console.error('下拉刷新失败', err);
            });
        }
    }
}


</script>

<style lang="less" scoped></style>